<template>
  <div class="main">
      <div class="device">
        <div @click="deviceData.show = true" class="dup">
          <span style="font-weight:500">警告</span>
          <!-- <img style="width: 10vw;" src="@svg/device.svg"/> -->
        </div>
        <div @click="deviceData.show = true" class="ddown">
          <span>宠物1超出围栏范围</span>
          <span>10:01</span>
        </div>
      </div>
  </div>
</template>

<script>
import mqtt from 'mqtt'
import { Dialog } from 'vant';
import { Toast } from 'vant';
var client
const options = {
    connectTimeout: 40000,
    clean: true
  }
 client = mqtt.connect('ws://121.5.58.100:8083/mqtt', options)
export default {
  name: 'Device',
  props: {
    id:String
  },
  components :{
  },
  created: function() {
    this.mqttMsg()
  }, 
  data() {
    return {
      relayc: '',
      modec: '',
      setHumic: '',
      isLoad: false,
      checked: false,
      show:true,
      value: this.test,
      send: '',
      param: '',
      flag: true,
      num: '',
      deviceData: {
        ID: this.id,
        hum:'--',
        temp: '--',
        mode:null,
        relaystate:null,
        show: false,
        rload: false,
        mload: false,
        sload: false,
        setHumi: 0
      },
    }
  },
  methods: {
    onRelayChange(detail) {
      this.flag=true
      this.deviceData.rload = true
      this.param = '{"ID":'+this.deviceData.ID+',"relayState":'+(detail.relaystate===true?1:0)+',"setHumi":-1,"modeFlag":-1}'
      console.log(this.param)
      client.publish('wsn/control', this.param)
      this.relayc=setInterval(() => {
        client.publish('wsn/control', this.param)
      }, 2500)
    },
    onModeChange(detail) {
      this.flag=true
      this.deviceData.mload = true
      this.param = '{"ID":'+this.deviceData.ID+',"modeFlag":'+(detail.mode===true?1:0)+',"setHumi":-1,"relayState":-1}'
      console.log(this.param)
      client.publish('wsn/control', this.param)
      this.modec=setInterval(() => {
        client.publish('wsn/control', this.param)
      }, 2500)
    },
    onHumiChange(detail) {
      this.flag=true
      this.deviceData.sload = true
      this.param = '{"ID":'+this.deviceData.ID+',"setHumi":'+detail.setHumi+',"relayState":-1,"modeFlag":-1}'
      console.log(this.param)
      client.publish('wsn/control', this.param)
      this.setHumic=setInterval(() => {
        client.publish('wsn/control', this.param)
      }, 2500)
    },
    mqttMsg() {
      client.on('connect', () => {
        console.log("连接成功！！！")
        client.subscribe('wsn/info', { qos: 0 }, (error) => {
          if (!error) {
            console.log('订阅成功')
          } else {
            console.log('订阅失败')
          }
        })
      })
      // 接收消息处理
      client.on('message', (topic, message) => {
        console.log(message.toString())   //控制台显示接收到的数据
        this.data = message.toString()
        this.res = JSON.parse(message.toString())

        if(this.res.Type==='H-T-Relay-DHT'){
          this.deviceData.ID = this.res.ID;
          this.deviceData.hum = this.res.Humi;
          this.deviceData.temp = this.res.Temp;
          if(this.deviceData.sload) {
            if(this.deviceData.setHumi === this.res.setHumi) {
              this.deviceData.sload=false
              clearInterval(this.setHumic);
              Toast.success('阈值设定成功')
            }
            else {
              console.log(this.param)
              client.publish('wsn/control', this.param)
            }
          }
          else {
            this.deviceData.setHumi = this.res.setHumi;
          }
          if(this.deviceData.mload) {
            if(this.deviceData.mode === (this.res.modeFlag===1?true:false)) {
              this.deviceData.mload=false
              clearInterval(this.modec);
              Toast.success('模式设定成功')
            }
            else {
              console.log(this.param)
              client.publish('wsn/control', this.param)
            }
          }
          else {
            this.deviceData.mode = this.res.modeFlag===1?true:false;
          }     
          if(this.deviceData.rload) {
            if(this.deviceData.relaystate === (this.res.relayState===1?true:false)) {
              this.deviceData.rload=false
              clearInterval(this.relayc);
              Toast.success('继电器设置成功')
            }
            else {
              console.log(this.param)
              // client.publish('farm/control', this.param)
            }
          }
          else {
            this.deviceData.relaystate = this.res.relayState===1?true:false;
          }
          if(this.res.setHumi<this.res.Humi && this.res.relayState===0 && this.flag===true && this.res.modeFlag===0) {
            this.num = this.res.ID
            Dialog.confirm({
              title: '提醒',
              message: '检测到节点湿度异常，是否打开继电器？',
            }).then(() => {
              this.deviceData.relaystate = true
              this.deviceData.rload = true
              this.param = '{"ID":'+this.deviceData.ID+',"relayState":1,"setHumi":-1,"modeFlag":-1}'
              console.log(this.param)
              client.publish('wsn/control', this.param)
              this.relayc=setInterval(() => {
                client.publish('wsn/control', this.param)
              }, 2500)
            })
            this.flag=false
          }
        }
      })
    },
  }
}
</script>
<style scoped>
.content {
  padding: 10px 16px;
}
.main{
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.device {
  width: 85vw;
  height: 188%;
  display: flex;
  flex-direction: column;
  justify-content:left;
  align-items:left;
  border-radius: 5px;
  margin: auto;
  margin-bottom: 20px;
  text-align: left;
  padding: 10px 10px;
  background-color: white;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.9);
}
.dup {
  /* flex: 0 0 20vw;
  width: 50px; */
  text-align: left;
  margin: 10px;
  
}
.ddown {
  width: -webkit-fill-available;
  margin: 10px;
  font-size: 4vw;
  display: flex;
    justify-content: space-between;
}
.custom-button {
  width: auto;
  padding: 5px 10px;
  color: #fff;
  font-size: 4vw;
  line-height: 5vw;
  text-align: center;
  background-color: #0aadee;
  border-radius: 20px;
}
</style>
